<template>
  <a-input-number
    :formatter="formatter"
    :style="{width:width>0?`${width}px`:'100%'}"
    v-model="val"
    :min="min"
    :max="max"
    :step="isFloat?0.01:step"
    :precision="isFloat?2:precision"
    :placeholder="placeholder">
  </a-input-number>
  <!--格式化用法示例：
    <ZgNumber :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"></ZgNumber>
    <ZgNumber :formatter="value => `${value}%`"></ZgNumber>
  -->
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    isFloat: {
      type: Boolean,
      default: false
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: Infinity
    },
    precision: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    },
    placeholder: {
      type: String,
      default: '请输入数字'
    },
    formatter: {
      type: Function,
      default: v => {
        return v
      }
    }
  },
  data () {
    return {
      val: 0
    }
  },
  watch: {
    modelVal (v) {
      this.val = v
    },
    val (v) {
      if ((typeof v) !== 'number') {
        this.val = 0
        this.$emit('change', 0)
      } else {
        this.$emit('change', v)
      }
    }
  },
  mounted () {
    this.val = this.modelVal
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>
